﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>CodePen - 03. Sidebar Says</title>
    <style>
        /*公共*/
        * { margin: 0; padding: 0; font-family: "微软雅黑",system-ui, serif; font-size: 14px; }
        body { font-family: system-ui, serif; }
        img { border-style: none }
        li { list-style: none; float: left }
        a { text-decoration: none }

        /*主体*/
        .main { display: grid; grid-template-columns: minmax(150px, 10%) 1fr; padding: 0; margin: 0; }

        /*侧边栏*/
        .main .sidebar { height: 100vh; background: #191818; text-align: left; color: #fff; overflow: hidden; overflow-y: auto; }
        .main .sidebar ul { width: 100%; }
        .main .sidebar ul li { width: 100%; height: 40px; line-height: 40px; padding-left: 10px; color: #999; }
        .main .sidebar ul li:hover { background: #333333; /*font-size: 15px; font-weight: 700; color: #fff;*/ cursor: pointer; }
        .main .sidebar .selectd { background: #1F8DD6; /*font-size: 15px; font-weight: 600;*/ color: #fff; }

        /*右侧主体*/
        .main .right { display: grid; height: 100vh; grid-template-rows: 80px 1fr auto; color: #fff; }

        /*右侧 顶部*/
        .main .right .header { background: #fff; display: grid; grid-template-columns: 1fr minmax(240px,240px); }
        .main .right .header .header_left { margin-left: 20px; margin-top: 10px; }
        .main .right .header .header_right { margin-left: 20px; margin-top: 10px; }


        /*右侧下部主体内容*/
        .main .right .right_main { background-image: url(/themes/images/bg1.png); padding-left: 10px; overflow: hidden; overflow-y: auto; }
        .jj-list { width: 99%; float: left; margin-bottom: 20px; z-index: 1 }
        .jj-list-tit { font-size: 12px; line-height: 30px; color: #B7B7B7; padding-left: 4px; z-index: 1 }
        .jj-list-con { overflow: hidden; z-index: 1; }
        .jj-list-con li { width: 150px; margin: 6px 3px; }

        .jj-list-con li { position: relative; height: 42px }
        .jj-list-con li:hover .i_r_remove { display: block }

        .link-3 { display: block; background: #FFF; color: #333; font-size: 14px; border: 0px solid #FFFFFF; text-align: center; line-height: 45px; height: 45px; border-radius: 3px; transition: all .2s; z-index: 1; }
        .link-3:hover { background: #4D90FE; font-size: 14px; border: 0px solid #6B7184; color: #fff; }

        /*滚动条*/
        *::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; }
        *::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #CCC; }
        *::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: #ededed; }


        /*百度搜索框*/
        form { display: inline; }
        .input1 { color: #333; border: 1px solid #005344; height: 50px; width: 60%; max-width: 650px; padding-left: 10px; font-size: 25px; border-radius: 10px; border-color: #C4C7CE; }
        .input1:focus { border: 1px solid #2468a2; outline: none; padding-left: 10px; }
    </style>
</head>

<body>
    <div class="main">
        <div class="sidebar">
            <div class="left">
                <ul id="left_ul">
                    <li id="menu_5" title="5" class="selectd">芒果常用地址</li>
                    <li id="menu_6" title="6">管理工具</li>
                    <li id="menu_7" title="7">近期</li>
                    <li id="menu_8" title="8">家庭多媒体</li>
                    <li id="menu_9" title="9">GoLang</li>
                    <li id="menu_10" title="10">Asp.net</li>
                    <li id="menu_11" title="11">Sql Server</li>
                    <li id="menu_12" title="12">jQuery</li>
                    <li id="menu_13" title="13">JavaScript</li>
                    <li id="menu_14" title="14">IIS</li>
                    <li id="menu_15" title="15">AOP</li>
                    <li id="menu_16" title="16">html5</li>
                    <li id="menu_17" title="17">教学大纲</li>
                    <li id="menu_18" title="18">Gps地图</li>
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="header">
                <div class="header_left">
                    <form action="http://www.baidu.com/s" method="GET" target="_self">
                        <a href="http://www.baidu.com">
                            <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度Logo" />
                        </a>
                        <input type="text" name="wd" size="38" class="input1" />
                        <input type="hidden" name="ie" value="utf-8" />
                        <input type="hidden" name="tn" value="ace" />
                    </form>
                </div>
                <div class="header_right">
                    <iframe frameborder="0" scrolling="no" width="240px" height="30px" style="float:right;" src="https://i.tianqi.com/?c=code&a=getcode&id=34&h=25&w=280"></iframe>
                </div>
            </div>
            <div class="right_main">
                <div class="jj-list">
                    <div class="jj-list-tit" title="工具">工具</div>
                    <ul class="jj-list-con _b">
                        <li><a href="https://wtmdoc.walkingtec.cn/" title="WTM基于.netcore的快速开发框架" class="link-3" target="_self" rel="nofollow">WTM基于.netcore</a></li>
                        <li><a href="http://mis.web.517.jiali//a90_BaseInfo/a9045_SystemParam/pub_SystemParam.aspx" title="系统参数-芒果团队后台管理" class="link-3" target="_self" rel="nofollow">系统参数-芒果团</a></li>
                        <li><a href="https://g.517cdn.com/misStyle/misUICss/style_mis_v2.html" title="mis结构统一样式文件" class="link-3" target="_self" rel="nofollow">mis结构统一样式</a></li>
                        <li><a href="http://www.iconfont.cn/search/index?q=auto&amp;page=1&amp;fromCollection=-1" title="阿里巴巴矢量图标库" class="link-3" target="_self" rel="nofollow">阿里巴巴矢量图</a></li>
                        <li><a href="https://wiki.517cdn.com/index.php/%E9%92%89%E9%92%89%E7%BE%A4%E7%9A%84%E5%88%9B%E5%BB%BA%E5%87%86%E5%88%99" title="钉钉群的创建准则" class="link-3" target="_self" rel="nofollow">钉钉群的创建准</a></li>
                        <li><a href="http://www.jsonla.com/excel2json/" title="在线excel转json,csv转json工具 - JSON啦！" class="link-3" target="_self" rel="nofollow">在线excel转json</a></li>
                    </ul>
                </div>
            </div>
            </main>
        </div>
    </div>
</body>
</html>
